
<template>
    <v-menu class="right-menu-avatar" >
        <template v-slot:activator="{ props }">
            <v-btn icon v-bind="props">
                <v-icon  icon="mdi-account"></v-icon>
            </v-btn>
            <!-- <v-avatar v-bind="props"
            class="pointer"
                :image="`${userProps?.userStore?.image || 'https://cdn.jsdelivr.net/gh/wuxin0011/blog-resource@main/picgo/zookeeper.png'}`"
                /> -->
            <!-- <span>{{ userProps?.userStore?.username || 'admin' }}</span> -->
        </template>
        <v-list>
            <v-list-item  v-for="(item,index) in items" :key="index" :title="item.title">
                <template #prepend>
                    <a :href="item.url" target="_blank" rel="noopener noreferrer">  <v-icon :icon="item.icon"  class="icon"></v-icon></a>
                </template>
            </v-list-item>
        </v-list>
    </v-menu>
</template>
<script setup lang="ts" >

const userProps = defineProps({
    userStore: {
        type: Object,
        default: () => {
            return {
                username: 'admin',
                image: 'https://cdn.jsdelivr.net/gh/wuxin0011/blog-resource@main/picgo/zookeeper.png'
            }
        }
    }
})

const items = [
    { url: 'https://gitee.com/xintianyuehui_ln/minecraft-abcserver-web',icon:'mdi-projector-screen',title:'项目' }
]


</script>

<style scoped lang="scss">


.icon:hover {
    color:teal;
}


</style>